
<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:查看他人个人资料页面
@author:成都市一颗优雅草科技有限公司     
@version V5.x 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   企业客服QQ:2853810243  官方客户·技术交流群 929353806交流群 929353806

 -->

<template>
	<view>
		<view class="user-bg"></view>
		<view class="head-wrapper">
			<view class="left-wrapper" @click="back">
				<uni-icons color="#ffffff" class="back" size="30" type="arrowleft" />
			</view>
			<view class="search-wrapper"></view>
			<view class="right-wrapper"></view>
		</view>
		<view class="content-wrapper">
			<view class="user-info-wrapper card">
				<view class="user-info-head">
					<view class="head-img-wrapper">
						<image class="head-img" :src="user.head_img ? formatUrl(user.head_img) : '/static/logo.png'"></image>
					</view>
					<view class="user-info-content-wrapper" @tap="tapUser">
						<text class="user-name">{{user!=null?user.name:''}}</text>
						<text class="user-id">ID: {{user.id ? user.id : '未设置'}}</text>
						<button v-if="thisuser.id != user.id" size="mini" class="user-follow" :class="{'cache':user.follow}" @tap="tapFollow">{{user.follow?'取消关注':'关注'}}</button>
					</view>
				</view>
				<view class="info-wrapper">
					<view class="info-item">
						<text class="count">{{user!=null?user.fans_count:'0'}}</text>
						<text class="count-title">粉丝</text>
					</view>
					<view class="info-item info-item-center">
						<text class="count">{{user!=null?user.follow_count:'0'}}</text>
						<text class="count-title">关注</text>
					</view>
					<view class="info-item">
						<text class="count">{{user!=null?user.skr_count:'0'}}</text>
						<text class="count-title">获赞</text>
					</view>
				</view>
			</view>
			<view class="video-list-wrapper card">
				<view class="video-title-wrapper">
					<text :class="{active:index==0}" @tap="changeType(0)">作品</text>
					<text :class="{active:index==1}" @tap="changeType(1)">喜欢</text>
				</view>
				<view class="video-data-wrapper">
					<video-page class="video-page" :videoList="videoData.data" :page="videoData.page" :type="videoData.type"></video-page>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import videoPage from '@/components/video/video-page.vue'
	
	export default {
		components: {
			videoPage,
			uniIcons
		},
		data() {
			return {
				sysheight: 0,
				height: '667px',
				width: '',
				index: 0,
				videoData: {
					type: 'other',
					data: [],
					page: 1,
					isMore: true
				},
				user: {
					id: null,
					head_img: null
				},
				uid: 0
			}
		},
		onLoad(e) {
			this.uid = e.uid;
			this.loadUser();
			this.initData();
		},
		computed: {
			thisuser() {
				return this.$store.state.user;
			}
		},
		methods: {
			formatUrl(url) {
				if (url.indexOf('http') != 0) {
					return this.$store.state.baseUrl + url;
				} else {
					return url;
				}
			},
			tabSetting() {
				uni.navigateTo({
					url: '/pages/setting/index'
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			loadUser() {
				this.$api.userOtherInfo({
					uid: this.uid
				}).then(({ data }) => {
					if (data.code == 0) {
						this.user = data.data;
					}
					console.log(this.user)
				});
			},
			tapFollow() {
				var type = 'add';
				if (this.user.follow) {
					//已关注
					type = 'cancel';
				}
				this.$api.followChange({
					uid: this.user.id,
					type: type
				}).then((res) => {
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						return;
					}
					this.user.follow = !this.user.follow;
					uni.showToast({
						title: res.data.msg
					});
				})
			},
			tapUser() {
				if (this.user == null) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			changeType(index) {
				this.index = index;
				this.videoData.data = [];
				this.videoData.type = index == 0 ? 'other' : 'otherLike';
				this.videoData.page = 1;
				this.loadData();
			},
			onPullDownRefresh() {
				this.loadUser();
				this.initData();
				uni.stopPullDownRefresh()
			},
			initData() {
				this.index = 0;
				//初始化视频信息
				this.videoData = {
					type: 'other',
					data: [],
					page: 1,
					isMore: true
				};
				//获取视频信息
				this.$api.videoList({
					uid: this.uid,
					type: this.videoData.type,
					page: this.videoData.page
				}).then((res) => {
					if (res.data.code == 1) {
						return;
					}
					this.videoData.data = res.data.data;
				})
				this.$nextTick(() => {
					uni.hideLoading()
				})
			},
			loadData() {
				//获取视频信息
				this.$api.videoList({
					uid: this.uid,
					type: this.videoData.type,
					page: this.videoData.page
				}).then((res) => {
					if (res.data.code == 1) {
						return;
					}
					this.videoData.data = res.data.data;
				})
			},
			onLoadMore() {
				if (this.videoData.isMore) {
					// 初始化视频列表
					this.$api.videoList({
						'type': this.videoData.type,
						'page': this.videoData.page++
					}).then(res => {
						uni.stopPullDownRefresh();
						if (res.data.code == 0) {
							this.videoData.data = this.videoData.data.concat(res.data.data);
						} else {
							this.isMore = false;
						}
						this.videoData.loadmore = false;
					}).catch(res => {
						this.videoData.isMore = false;
						uni.stopPullDownRefresh();
					})
				} else {
					uni.showToast({
						title: '暂无更多数据'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background:#000 ;
	}

	.user-bg {
		position: absolute;
		top: 0;
		width: 750rpx;
		height: 328px;
		background: #000;
	}

	.head-wrapper {

		align-items: center;
		position: fixed;
		//#ifdef APP-PLUS
		padding-top: 44rpx;
		//#endif
		z-index: 1;
		left: 0;
		right: 0;
		background: rgba($color: #000000, $alpha: 0);
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 88rpx;
		// background-color: red;
	}

	.left-wrapper {

		margin-left: 12rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
	}

	.right-wrapper {
		display: flex;
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex: 3;
		margin-right: 24rpx;
		flex-wrap: nowrap;
	}

	.setting-img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;

	}

	.setting-text {
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.search-wrapper {
		margin-right: 24rpx;

		// background: #09BB07;
		flex: 8;
		flex-direction: row;
		align-items: center;
		align-content: center;
		justify-content: center;

	}

	.search {
		flex: 1;
	}

	.content-wrapper {
		position: relative;
		padding-top: 88rpx;
		padding-bottom: 123rpx;
		//#ifdef APP-PLUS
		padding-top: 128rpx;
		//#endif

		height: 100%;
		width: 100%;
	}

	.user-info-wrapper {

		margin: 24rpx;

	}

	.user-info-head {
		padding-left: 48rpx;
		padding-right: 48rpx;
		padding-top: 48rpx;
		padding-bottom: 24rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-bottom: 24rpx;

		.head-img-wrapper {
			flex: 3;
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: center;

			.head-img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}

		}

		.user-info-content-wrapper {
			position: relative;
			flex: 9;
			display: flex;
			flex-direction: column;
			margin-left: 24rpx;
			justify-content: flex-start;

			.user-name {
				font-size: 36rpx;
			}

			.user-id {
				margin-top: 12rpx;
				font-size: 24rpx;
			}

			.user-follow {
				&.cache {
					background-color: rgba($color: #000000, $alpha: .05);
					color: #929292;
					border: none;
				}

				width: 200rpx;
				position: absolute;
				left: 0rpx;
				bottom: 0rpx;
				margin-top: 12rpx;
				background-color: $uni-text-color-active;
				color: $uni-text-color-inverse;
				font-size: 24rpx;
			}
		}
	}



	.info-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 48rpx;

		.info-item {
			position: relative;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			align-content: center;
		}

		.info-item-center:before {
			content: '';
			position: absolute;
			left: 0;
			top: 25%;
			bottom: auto;
			right: auto;
			height: 52%;
			width: 1px;
			background: rgba(0, 0, 0, 0.6);
		}

		.info-item-center:after {
			content: '';
			position: absolute;
			right: 0;
			top: 25%;
			bottom: auto;
			height: 52%;
			width: 1px;
			// background: rgba(0, 0, 0, 0.6);
		}

		.count {
			font-size: 36rpx;
		}

		.count-title {
			font-size: 24rpx;
			margin-top: 12rpx;
			color: rgba(0, 0, 0, 0.6);
		}
	}

	.video-list-wrapper {
		margin: 24rpx;
		display: flex;
		flex-direction: column;
	}

	.video-title-wrapper {
		text {
			display: inline-block;
			margin-left: 24rpx;
			margin-right: 24rpx;
			padding: 24rpx;
		}


	}

	.video-data-wrapper {
		flex: 10;
	}
</style>
